<template>
    <div class="wrap">
        <div class="con">
            <pro-item :show="false" v-for="(item,i) in list" :key="i"
                :avgPrice="item.avgPrice"
                :defaultPic="item.defaultPic"
                :distanceStr="item.distanceStr"
                :mainCategoryName="item.mainCategoryName"
                :shopId="item.shopId"
                :shopName="item.shopName"
                :shopPower="item.shopPower"
                :status="item.status"
                @choose="choose"
            ></pro-item>
        </div>
        <div class="car">
            <span>数量：{{chooseList.length}}</span>
            <button @click="goCreateForm" :class="{'active':chooseList.length}">确认添加</button>
        </div>
    </div>
</template>
<script>
import proItem from '../components/proItem'
export default {
    components:{
        proItem
    },
    data(){
        return {
            list:[],
            chooseList:[]
        }
    },
    created(){
        this.chooseList = JSON.parse(localStorage.getItem('chooseList')) || [];
        this.$http.get('/api/list').then(res => {
            if(res.data.code == 200){
                let data = res.data.msg.string;
                this.list = data.map(item => {
                    item.status = false
                    this.chooseList.forEach(cItem => {
                        if(cItem.shopId === item.shopId){
                            item.status = cItem.status
                        }
                    })
                    return item
                })
            }
        })
    },
    methods:{
        choose(shopId,text){
            if(text === '-'){ //添加
                let index = this.list.findIndex(item => item.shopId === shopId);
                this.list[index].status = true;
                this.chooseList.push(this.list[index]);
            }else{ //删除
                let delIndex = this.chooseList.findIndex(dItem => dItem.shopId === shopId);
                this.chooseList.splice(delIndex,1);
            }
            window.localStorage.setItem('chooseList',JSON.stringify(this.chooseList));
        },
        goCreateForm(){
            if(this.chooseList.length){
                this.$router.push('/createForm')
            }else{
                alert('还没选择')
            }
        }
    },
    beforeDestroy(){
        this.$bus.$emit('choose',this.list)
    }
}
</script>
<style>
    .car{
        width:100%;
        height: 50px;
        background: #333;
    }
    .active{
        background: red;
    }
</style>

